<template >
  <div name="div" style="padding-bottom:45px">
    <!-- 题型 -->
    <el-row type="flex" style="margin-bottom: 20px " justify="space-between" :data="querSION"  class="elrow">
      <el-col :span="6"
        ><span>【题型】:{{ formatt(querSION.questionType) }}</span></el-col
      >
      <el-col :span="6"
        ><span>【编号】：{{ querSION.enterpriseID }}</span></el-col
      >
      <el-col :span="6"
        ><span>【难度】：{{ formattt(querSION.difficulty) }}</span></el-col
      >
      <el-col :span="6"
        ><span>【标签】：{{ querSION.tags }}</span></el-col
      >
    </el-row>

    <el-row :gutter="20" class="elrow">
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【学科】:{{ querSION.subjectName }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【目录】：{{ querSION.directoryName }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【方向】：{{ querSION.direction }}
        </div></el-col
      >
    </el-row>

    <hr />

    <!-- 题干 -->
    <el-row >
      <el-col :span="24">
        <div style="margin-top: 20px">
          <p>【题干】：</p>
          <p v-html="querSION.question" class="clore">{{ querSION.question }}</p>

     <!-- 单选框 -->
          <div v-if="querSION.questionType === '1'">
            <p>单选题 选项：（以下选中的选项为正确答案）</p>
            <el-radio
              class="el-radio"
              @change="lab = 1"
              v-model="lab"
              :label="obj.isRight"
              v-for="obj in querSION.options"
              :key="obj.id"
            >
              {{ obj.title }}
            </el-radio>
          </div>

          <!-- 多选框 -->
          <div v-if="querSION.questionType === '2'">
            <p>多选题 选项：（以下选中的选项为正确答案）</p>
            <el-checkbox
              @change="checkbox = [1]"
              :label="obj.isRight"
              v-model="checkbox"
              v-for="obj in querSION.options"
              :key="obj.id"
            >
              {{ obj.title }}
            </el-checkbox>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-divider></el-divider>

    <!-- 参考答案s -->
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          【参考答案】：<el-button type="danger" @click="showint"
            >视频答案预览
          </el-button>
          <div>
          <video
            v-if="play"

            autoplay
            :src="querSION.videoURL"
          ></video></div>
        </div>
      </el-col>
    </el-row>

    <el-divider></el-divider>

    <!-- 答案解析 -->
    <el-row>
      <el-col >

          【答案解析】：<span   class="abcc" v-html="querSION.answer">{{
            querSION.answer
          }}</span>

      </el-col>
    </el-row>

    <el-divider></el-divider>

    <!-- 题目备注 -->
    <el-row>
      <el-col :span="24">
        【题目备注】：<span>{{ querSION.remarks }}</span>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { questionType, difficulty } from '@/api/hmmm/constants.js'
import { detail } from '@/api/hmmm/questions'
export default {
  name: 'obj',
  props: {
    userid: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      checkbox: [1], // 默认的多选属性
      lab: 1, // 默认的单选属性
      play: false, // 是否隐藏
      querSION: [] // 题干列表
    }
  },

  created () {
    this.detail()
  },
  methods: {
    async detail () {
      // console.log(this.userid.row.questionIDs[this.userid.index])
      const res = await detail(this.userid.row.questionIDs[this.userid.index])
      this.querSION = res.data
    },

    // 改变题型
    formatt (dat) {
      const obj = questionType.find((item) => item.value === Number(dat))
      return obj ? obj.label : ''
    },

    // 改变难度
    formattt (dat) {
      const obj = difficulty.find((item) => item.value === Number(dat))
      return obj ? obj.label : ''
    },

    // 隐藏视频
    showint () {
      this.play = true
    }

  }
}
</script>

<style>

.el-radio{
  display:block;
  margin-bottom: 10px;
}
.el-checkbox{
 display:block;
  margin-bottom: 20px;
}
.clore{
color:blue
}
video{
  height: 100%;
 width: 300px;
 margin: 0;
}
.abcc{
display:inline-block;
}
.elrow {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 20px;
}
</style>
